<template>
	<div>
		<div class="outDiv">
			<div>
				<go-back aa='../chooseCourse/selectCouerse'></go-back>
				<div class="cccmain">
					<div class="title" v-show="pruel=='planRecord'">
						<div class="times">
							<b>最佳选课方案</b>
							<span>第{{$store.state.indexNum}}次生成</span>
						</div>
						<div class="createTime">{{ createTime }}</div>
					</div>
					<div class="tops" v-show="pruel=='advanCourse'">
						<h2>最佳选课方案</h2>
					</div>
					<h3>您有3个组合方案</h3>
					<CaseSwriper :arrData="itemList"></CaseSwriper>
					<div class="boots" v-show="pruel=='advanCourse' && itemList.length>1 ">
						<img src="~/static/images/icon_arrow_up.png" alt="">
						<span>左右滑动选择您满意的组合方案</span>
					</div>


				</div>

			</div>
			<span v-show="pruel=='advanCourse'" class="btoosbtn" @click="savrCse">确定选择，返回首页</span>
		</div>
	</div>
</template>
<script>
	import goBack from '~/components/goBack'
	import CaseSwriper from '~/components/CaseSwriper'
	import { returnScheme, createScheme} from "~/api/selectCourse";
	import Swiper from 'swiper/dist/js/swiper.js';
	import ls from 'store2';
	export default {
		head: {
		},

	components: {
			goBack,
			CaseSwriper,
		},
		data() {
			return {
				itemList: [{
						children: ['历史', '化学', '生物']
					},
					{
						children: ['历史', '化学', '生物']
					},
					{
						children: ['历史', '化学', '生物']
					}
				],
				tabIndex: 0,
				createTime: '',
				times: '',
				sherm: '',
				pruel: ''
			}
		},
		computed: {
			resultCategoryId() {
				return this.tabIndex;
			},
		},
		created() {
			this.commonJs.gologins();
			this.pruel = ls.get('preUrl')
			if (this.pruel == 'advanCourse') {
				let str = this.$route.query.type;
				this.returnScheme(str)
			} else {
				let listad = JSON.parse(this.$route.query.type)
				let are = []
				listad.forEach(item => {
					are.push({
						children: item
					})
				})
				this.itemList = are
			}

		},

		mounted: function() {
			this.swip();
		},

		methods: {
			returnScheme(str) {
				let obj = {
					province: ls.get('userArea'),
					ranking: str,
					userType: ls.get('userType')
				}
			returnScheme(obj).then(res => {
					if (res.code === '0') {
						let aa = JSON.parse(res.data)
						this.sherm = res.data
						let ary = []
						aa.forEach(item => {
							ary.push({
								children: item
							})
						})
						this.itemList = ary
					}
				}).catch(() => {
					this.$vux.toast.text('服务器繁忙，请稍后再试');
				})
			},
			savrCse() {
				this.getFinResult()
			},
			getFinResult() {
				let obj = {
					"scheme": this.sherm,
					"userType": ls.get('userType')
				}
				createScheme(obj).then(res => {
					if (res.code === '0') {
						this.$vux.toast.text(res.message);
						setTimeout(() => {
							this.commonJs.gosto('selectCouerse')
						}, 40)
					}
				}).catch(() => {
					this.$vux.toast.text('服务器繁忙，请稍后再试');
				})
			},
			Shrink(index, item) {
				this.tabIndex = index;
				item.state = !item.state;
			},
			// 数字1~9转换成中文
			numberTurnChinese(num) {
				let result = '';
				switch (num) {
					case 1:
						result = '一';
						break;
					case 2:
						result = '二';
						break;
					case 3:
						result = '三';
						break;
					case 4:
						result = '四';
						break;
					case 5:
						result = '五';
						break;
					case 6:
						result = '六';
						break;
					case 7:
						result = '七';
						break;
					case 8:
						result = '八';
						break;
					case 9:
						result = '九';
						break;
					default:
						break;
				}
				return result;
			},
			swip() {
				new Swiper("#swiper1", {
					direction: 'horizontal',
					loop: false,
					autoplay: 5000,
					slidesPerView: "auto",
					centeredSlides: true,
					spaceBetween: 10,
					// 如果需要分页器
					pagination: '.swiper-pagination',
					autoplay: false,
					observer: true,
					observeParents: true,
					autoplay: {
						delay: 50000000,
						disableOnInteraction: false
					}

				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;

		.cccmain {
			margin-top: 0.3rem;

			.tops {
				h2 {
					height: 0.8rem;
					font-size: 0.4rem;
					font-weight: bold;
					color: rgba(34, 34, 34, 1);
					line-height: 0.8rem;
					text-align: center;
				}
			}

			.boots {
				img {
					display: block;
					height: 0.32rem;
					width: 0.32rem;
					margin: 0 auto;
				}

				span {
					display: block;
					text-align: center;
					height: 0.6rem;
					font-size: 0.26rem;
					font-family: Helvetica;
					color: rgba(187, 187, 187, 1);
					line-height: 0.6rem;
				}
			}

			.title {
				padding: 0 0.3rem;
				margin-bottom: 0.3rem;
				border-bottom: 0.02rem solid #EEE;

				.times {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 0.15rem;

					b {
						color: #222;
						font-weight: bold;
						font-size: 0.3rem;
						letter-spacing: 0.01rem;
					}

					span {
						display: inline-block;
						width: 1.9rem;
						height: 0.5rem;
						line-height: 0.5rem;
						color: #999;
						font-size: 0.24rem;
						font-weight: bold;
						letter-spacing: 0.03rem;
						text-align: center;
						background: #F5F5F5;
						border-radius: 0.25rem;
					}
				}

				.createTime {
					color: #BBB;
					font-size: 0.3rem;
					line-height: 0.44rem;
					letter-spacing: 0.03rem;
					margin-bottom: 0.3rem;
				}
			}

			h3 {
				color: #222;
				font-size: 0.3rem;
				font-weight: bold;
				margin: 0.4rem 0.6rem;
			}

			.accordionList {
				padding: 0 0.6rem;
				list-style: none;
				text-align: center;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.accordion_item {
					width: 6.3rem;
					height: 6rem;
					background: #fff;
					box-shadow: 0 0 0.2rem 0 rgba(204, 204, 204, 0.3);
					border-radius: 0.3rem;
				}
			}
		}
	}

	svg {
		width: 0.4rem;
		height: 0.4rem;
	}

	.bannerImgBox {
		width: 6.7rem;
		height: 6rem;
		display: block;
		border: none;
		border-radius: 0.1rem;
		background-image: url('~/static/images/header.png');
		background-size: 100% 100%;
		margin: 0 auto;
	}

	.btoosbtn {
		position: fixed;
		bottom: 0.1rem;
		width: 3.3rem;
		height: 0.7rem;
		background: rgba(108, 191, 32, 1);
		border-radius: 0.1rem;
		left: 2.1rem;

		font-size: 0.28rem;
		color: rgba(255, 255, 255, 1);
		line-height: 0.7rem;
		text-align: center;
	}
</style>
